<template>
  <div class="addCarType">

    <!-- Form -->
    <el-dialog width="600px" :visible="true" :before-close="cancelBtn" :close-on-click-modal="false">
      <div slot="title">
        <div class="addTitle">{{ title }}</div>
      </div>
      <el-form  label-position="top" :label-width="formLabelWidth" v-if="state!='info'">
        <el-form-item label="" >
          <el-tree
            ref="tree"
            :data="classList"
            show-checkbox
            node-key="id"
            :default-checked-keys="checkedList"
            :props="defaultProps"
            @check-change="change">
          </el-tree>
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="cancelBtn">取 消</el-button>
        <el-button type="primary" @click="confirm">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {routerGroupSync,routerList,routerGroupList} from "@/api"
import EditorBar from "@/components/wangEditor";
export default {
  name: "addClass",
  components: {
    EditorBar
  },
  props:['item','state','closeAlert'],
  data(){
    return{
      defaultProps: {
          children: 'children',
          label: 'name'
      },
      formLabelWidth: '120px',
      title: '关联路由',
      classList:[],
      checkedList:[],
      group_id:'',
      router_ids:[]
    }
  },
  mounted() {
    console.log(this.state)
    this.getRouter()


  },
  methods:{
    // 详情
    async info(){
      this.group_id = this.item.id
      routerGroupList({
        group_id:this.group_id
      }).then(res=>{
        console.log(res)
        if(res.code==10000){
          res.data.forEach((item,index)=>{
            this.checkedList.push(item.id)
            if(item.children.length!=0){
              item.children.forEach((items,indexs)=>{
                this.checkedList.push(items.id)
                if(items.children.length!=0){
                  items.children.forEach((itemss,indexss)=>{
                    this.checkedList.push(itemss.id)
                  })
                }
              })
            }
          })
        }
        console.log(this.checkedList)
        this.checkedList=JSON.parse(JSON.stringify(this.checkedList))
      })
      // console.log(this.form)
    },
    // 确认
    async confirm(){
      await routerGroupSync({
        group_id:this.group_id,
        router_ids:this.router_ids
      }).then(res=>{
        if (res.code==10000){
          this.$message({
            message: res.message,
            type: 'success'
          });
          this.cancelBtn();
        }
      })

    },
    getRouter(){
      routerList({
        tree:1,
        paginate:0
      }).then(res=>{
        console.log(res)
        if(res.code==10000){
          this.classList = res.data
          this.info()
        }
      })
    },
    change(e){
//       console.log(this.$refs.tree.getCheckedNodes(),
// this.$refs.tree.getCheckedKeys())
      this.router_ids=this.$refs.tree.getCheckedKeys()
      // if(this.router_ids.length!=0){
      //   this.router_ids.forEach((item,index)=>{
      //     if(item==e.id){
      //       this.router_ids.splice(index,1)
      //     }else{
      //       this.router_ids.push(e.id)
      //     }
      //     if(e.children.length!=0){
      //       e.children.forEach((items,indexs)=>{
      //         if(item==items.id){
      //           this.router_ids.splice(indexs,1)
      //         }else{
      //           this.router_ids.push(items.id)
      //         }
      //       })
      //     }
      //   })
      // }else{
      //   this.router_ids.push(e.id)
      // }
      // console.log(this.router_ids)

    },
    // 关闭弹窗
    cancelBtn(){
      this.$emit('closeAlert',false)
    }
  }
}
</script>

<style scoped lang="less">
.addTitle{
  font-size: 28px;
  font-family: PingFangSC-Semibold, PingFang SC;
  font-weight: 600;
  color: #000000;
}
/deep/.el-dialog__header,
/deep/.el-dialog__body,
/deep/.el-dialog__footer{
  padding-left: 45px;
  padding-right: 45px;
}
/deep/.el-form-item__label{
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #000000;
}
///deep/.el-form-item__content input{
//  border: none;
//  background: #F4F4F4;
//  border-radius: 10px;
//}
.el-select{
  width: 100%;
}

</style>

